<template>
    <div>
        <div id="map-container" style="width: 500px; height: 500px;"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

const map = ref(null); // 地图实例
const marker = ref(null); // 标记实例

// 初始化地图
const initMap = () => {
    AMapLoader.reset();
    AMapLoader.load({
        key: '7fac11790025fa9da05e739566ca7af8', // 替换为你的高德地图 API Key
        version: '2.0', // 指定高德地图版本
        plugins: ['AMap.Marker'], // 需要使用的插件
    })
    .then((AMap) => {
        // 初始化地图
        map.value = new AMap.Map('map-container', {
        zoom: 15, // 缩放级别
        center: [116.397428, 39.90923], // 中心点坐标（北京天安门）
        });

         // 绑定点击事件
        map.value.on('click', showInfoClick);


        // 添加标记
        marker.value = new AMap.Marker({
        position: [116.397428, 39.90923], // 标记的位置
        title: '天安门', // 标记的标题
        });

        // 将标记添加到地图上
        map.value.add(marker.value);
    })
    .catch((error) => {
        console.error('地图加载失败', error);
    });
};

// 点击设置位置标记
const showInfoClick = (e) => {
    let text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！';
    console.log(text);

    // 清除地图上所有添加的覆盖物
    map.value.clearMap();

    // 创建点覆盖物
    let m = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
    });
    map.value.add(m);
}

// 直接设置标记
const setMarketPosition = (lng: any, lat: any) => {
    let text = '您在 [ '+lng+','+lat+' ] 的位置单击了地图！';
    console.log(text);

    // 清除地图上所有添加的覆盖物
    map.value.clearMap();

    // 创建点覆盖物
    let m = new AMap.Marker({
        position: new AMap.LngLat(lng, lat)
    });
    map.value.add(m);
};

onMounted(() => {
    initMap();
});

</script>

<style scoped>

</style>